<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../jquery.js"></script>
    <link rel="stylesheet" href="../bootstrap-3.4.1/dist/css/bootstrap.css">
    <script src="../bootstrap-3.4.1/dist/js/bootstrap.js"></script>
</head>
<style>
    th {
        text-align: center;
    }

    #jia {

        background-color: aqua;
    }

    #jia1 {

        background-color: aqua;
    }

    #qu, #qu1 {
        width: 23px;
        background-color: red;
        color: seashell;
    }

    #qu2 {
        width: 23px;
        background-color: red;
        color: seashell;
    }

    #qu3 {
        width: 23px;
        background-color: red;
        color: seashell;
    }
</style>

<body>
    <table class="table table-striped table-bordered" style=" margin: auto;">
        <thead>
            <tr id="tr1">
            <th></th>
            <th>参数值 <button id="qu">-</button></th>
            <th>参数值 <button id="qu2">-</button></th>
            <th>参数值 <button id="qu3">-</button></th>
            <th><button id="jia">+</button></th>
        </tr>
        </thead>
        <tbody id="ed">
            <tr id="tr2">
                <td id="ipt">参数名</td>
                <td><input type="text" value="123" id="ipt1"></td>
                <td><input type="text" value="123" id="ipt2"></td>
                <td><input type="text" value="123" id="ipt3"></td>
                <td><button class="qu2">-</button></td>
            </tr>
            <!-- <tr>
                <td>参数名</td>
                <td><input type="text" value="123"></td>
                <td><input type="text" value="123"></td>
                <td><input type="text" value="123"></td>
                <td><button id="qu2" >-</button></td>
            </tr> -->
            <!-- <tr>
                <td>参数名</td>
                <td><input type="text" value="123"></td>
                <td><input type="text" value="123"></td>
                <td><input type="text" value="123"></td>
                <td><button id="qu2">-</button></td>
            </tr> -->
        </tbody>
        <tr>
            <td><button id="jia1">+</button></td>
        </tr>
    </table>


                                             
</body>
<script>
    var num=5;
    var indexArr=[];
    $(function () {

        //竖向
        
        $('#jia').click(function () {
            var iptobj = $('.qu2').val()
            ipt2obj = $('#ipt2').val()
            var obj={ 'min':iptobj, 'jia': ipt2obj}
            indexArr.push(num)
            console.log(indexArr);
            var st1 = ''
                st1+= `
                <th>参数名<button class="lie" onclick="dellie(${num++})">-</button></th>
                     `           
                $('#tr1').append(st1)

                var st = ''
                st += `
                    <td><input type="text" value="123" id="ipt2"></td>
                     `           
                $('#tr2').append(st)
                
                
        })

       

    //横向
    var arr = []
        $('#jia1').click(function () {
            var iptobj = $('#ipt').val()
            ipt1obj = $('#ipt1').val()
            ipt2obj = $('#ipt2').val()
            ipt3obj = $('#ipt3').val()
            ipt4obj = $('#ipt4').val()
            var obj={ 'min':iptobj, 'jia': ipt1obj, 'ku': ipt2obj, 'shijian': ipt3obj, 'ipt3' : ipt4obj}
            // localStorage.setItem("arr", JSON.stringify(arr));
            var st = ''
                st = `<tr>
                           <td>参数名</td>
                           <td><input type="text" value="123"></td>
                           <td><input type="text" value="123"></td>
                           <td><input type="text" value="123"></td>
                           <td><button id="qu2" onclick="fun(this)">-</button></td>
                     </tr>`
                    //  arr = JSON.parse(localStorage.getItem("arr")) ?? [];
                $('#ed').append(st)
                setLocal(obj)
                
        })
        
    })
    function fun(s) {
      var chu = s.parentNode.parentNode;
      chu.remove();
    }

    //删除列
    function dellie(num){
        var index=indexArr.indexOf(num)
        $(`tr th:eq(${5+index})`).remove();
        $(`tr td:eq(${5+index})`).remove();
        indexArr.splice(index,1);
        console.log(indexArr);
    }


    //取出数据并渲染到页面
    function getLocal() {
    //检查本地存储是否有值
    if (!localStorage.getItem('list')) {
        return
    }
    let data = JSON.parse(localStorage.getItem('list')); //获取本地数据转化数组
    var st = '';
    for(let a=0;a<data.length;a++){
        st += `<tr>
                    <td>参数名</td>
                    <td><input type="text" value="123"></td>
                    <td><input type="text" value="123"></td>
                    <td><input type="text" value="123"></td>
                    <td><button id="qu2" onclick="fun(this)">-</button></td>
                </tr>`
    }
        $('#ed').append(st)
    
    }




    //let g = ['ndasndoasnondoansdas','dsfghds']
    // function show() {
    //     localStorage.setItem('name',JSON.stringify(g))
    //     arr = JSON.parse(localStorage.getItem('arr'))
    //     $('#ed').html(arr)
    // }
    

    //存入本地
    function setLocal(obj) {
    //判断数据
    if (!localStorage.getItem('list')) {
        //首次没有任何值 或者值为空的时候
        localStorage.setItem('list', JSON.stringify([obj]))
    } else {
        //已经有数据的时候 需要先获取数据 
        let data = JSON.parse(localStorage.getItem('list'))
        //添加
        data.unshift(obj)
        //添加完数据之后再存入本地存储
        localStorage.setItem('list', JSON.stringify(data))
    }
}

$(function(){
    getLocal()
})

</script>

</html>